<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>疫苗信息管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form
      :model="queryParams"
      ref="queryParams"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="医院" prop="hospitalId">
        <el-select
          v-model="queryParams.hospitalId"
          @change="hospitalChange"
          placeholder="请输入医院关键词"
          default-first-option
          filterable
          remote
          clearable
          :remote-method="getHospitalList"
          :loading="hospitalLoading"
        >
          <el-option
            @click.native="
              hospitalName = item.hospitalName;
              queryParams.vaccineSortId = null;
              vaccineSortList = [];
            "
            v-for="item in hospitalList"
            :key="item.hospitalName"
            :label="item.hospitalName"
            :value="item.hospitalId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="sortId">
        <el-select
          :disabled="!queryParams.hospitalId"
          v-model="queryParams.sortId"
          default-first-option
          placeholder="请输入分类关键词"
          clearable
          filterable
          remote
          :remote-method="getVaccineSortList"
          :loading="vaccineSortLoading"
        >
          <el-option
            @click.native="
              () => {
                vaccineSortName = item.vaccineSortName;
                handleQuery();
              }
            "
            v-for="item in vaccineSortList"
            :key="item.vaccineSortId"
            :label="item.vaccineSortName"
            :value="item.vaccineSortId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="!queryParams.hospitalId || !queryParams.sortId"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!--修改对话框-->
    <el-row :gutter="12">
      <el-col :span="6">
        <el-button
          type="success"
          icon="el-icon-plus"
          :disabled="!queryParams.hospitalId || !queryParams.sortId"
          @click="addDialog"
          >添加疫苗信息</el-button
        >
      </el-col>
    </el-row>

    <!--表格列表-->
    <el-table :data="tableData">
      <el-table-column prop="vaccineId" label="疫苗ID"></el-table-column>
      <el-table-column prop="vaccineName" label="疫苗名称"></el-table-column>
      <el-table-column prop="vaccinePrice" label="价格"></el-table-column>
      <el-table-column prop="vaccineFactory" label="生产厂家"></el-table-column>
      <el-table-column prop="vaccineType" label="接种类别"></el-table-column>
      <el-table-column prop="vaccineIntro" label="疫苗介绍"></el-table-column>
      <el-table-column prop="vaccineImg" label="图片">
        <template slot-scope="scope">
          <div class="img-wrapper">
            <img :src="baseImgUrl + scope.row.vaccineImg" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="suitableAge" label="适合年龄"></el-table-column>
      <el-table-column min-width="120px" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="success" @click="getOne(scope.row)">修改</el-button>
          <el-button type="danger" @click="deleteItem(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :total="queryParams.total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!--修改对话框-->
    <el-dialog
      :visible.sync="editFlag"
      :close-on-click-modal="false"
      title="修改疫苗信息"
    >
      <el-form :rules="rules" ref="form">
        <el-form-item label="医院名">
          <el-input
            v-model="hospitalName"
            disabled
            placeholder="请输入医院名"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="vaccineSortId">
          <el-input
            v-model="vaccineSortName"
            disabled
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="疫苗名称" prop="vaccineName">
          <el-input
            v-model="form.vaccineName"
            placeholder="请输入疫苗名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="疫苗图片" prop="vaccineImg">
          <ImageUpload
            @getReqUrl="(res, file) => (form.vaccineImg = res)"
          ></ImageUpload>
        </el-form-item>
        <el-form-item label="疫苗价格" prop="vaccinePrice">
          <el-input
            v-model="form.vaccinePrice"
            step="0.01"
            type="number"
            placeholder="请输入疫苗价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="生产厂家" prop="vaccineFactory">
          <el-input
            v-model="form.vaccineFactory"
            placeholder="请输入生产厂家"
          ></el-input>
        </el-form-item>
        <el-form-item label="接种类别" prop="vaccineType">
          <el-select v-model="form.vaccineType" placeholder="请选择疫苗类型">
            <el-option
              v-for="item in vaccineTypes"
              :key="item.key"
              :value="item.label"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="疫苗介绍" prop="vaccineIntro">
          <el-input
            v-model="form.vaccineIntro"
            type="textarea"
            :rows="4"
            placeholder="请输入疫苗介绍"
          ></el-input>
        </el-form-item>
        <el-form-item label="适合年龄" prop="suitableAge">
          <el-input
            v-model="form.suitableAge"
            placeholder="请输入适合年龄"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFlag = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加对话框 -->
    <el-dialog
      :visible.sync="addFlag"
      :close-on-click-modal="false"
      title="新增疫苗信息"
    >
      <el-form :rules="rules" ref="form">
        <el-form-item label="医院名">
          <el-input
            v-model="hospitalName"
            disabled
            placeholder="请输入医院名"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="vaccineSortId">
          <el-input
            v-model="vaccineSortName"
            disabled
            placeholder="请输入分类名"
          ></el-input>
        </el-form-item>
        <el-form-item label="疫苗名称" prop="vaccineName">
          <el-input
            v-model="form.vaccineName"
            placeholder="请输入疫苗名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="疫苗图片" prop="vaccineImg">
          <ImageUpload
            @getReqUrl="(res, file) => (form.vaccineImg = res)"
          ></ImageUpload>
        </el-form-item>
        <el-form-item label="疫苗价格" prop="vaccinePrice">
          <el-input
            v-model="form.vaccinePrice"
            step="0.01"
            type="number"
            placeholder="请输入疫苗价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="生产厂家" prop="vaccineFactory">
          <el-input
            v-model="form.vaccineFactory"
            placeholder="请输入生产厂家"
          ></el-input>
        </el-form-item>
        <el-form-item label="接种类别" prop="vaccineType">
          <el-select v-model="form.vaccineType" placeholder="请选择疫苗类型">
            <el-option
              v-for="item in vaccineTypes"
              :key="item.key"
              :value="item.label"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="疫苗介绍" prop="vaccineIntro">
          <el-input
            v-model="form.vaccineIntro"
            type="textarea"
            :rows="4"
            placeholder="请输入疫苗介绍"
          ></el-input>
        </el-form-item>
        <el-form-item label="适合年龄" prop="suitableAge">
          <el-input
            v-model="form.suitableAge"
            placeholder="请输入适合年龄"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  vagueHospitalList,
  vaccineSortQueryList,
  deleteVaccine,
  vaccineList,
  addVaccine,
  getOneVaccine,
  updateVaccine,
  baseImgUrl,
} from "../../api/api";
import ImageUpload from "../ImageUpload/index";
export default {
  components: {
    ImageUpload,
  },
  data() {
    return {
      baseImgUrl,
      vaccineTypes: [
        {
          key: 0,
          value: 0,
          label: "注射",
        },
        {
          key: 1,
          value: 1,
          label: "吸入",
        },
      ],
      showSearch: true,
      hospitalLoading: false,
      vaccineSortLoading: false,
      addFlag: false,
      editFlag: false,
      tableData: [],
      pager: {
        current: 1,
        size: 5,
        total: 0,
      },
      List: [],
      form: {
        vaccineId: 0,
        vaccineName: "",
        vaccinePrice: "",
        vaccineFactory: "",
        vaccineType: "",
        vaccineIntro: "",
        vaccineImg: "",
        suitableAge: "",
        vaccineSortId: null,
      },
      rules: {
        vaccineSortName: [
          { required: true, message: "分类名不能为空", trigger: "blur" },
        ],
      },
      hospitalName: "", //增加修改弹出框的医院名
      vaccineSortName: "", //增加修改弹出框的疫苗分类
      hospitalList: [],
      vaccineSortList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        hospitalName: null,
        vaccineSortName: null,
        hospitalId: null,
      },
      first:true,
    };
  },
  methods: {
    addDialog() {
      this.reset()
      if (this.queryParams.hospitalId == null) return;
      this.form.hospitalId = this.queryParams.hospitalId;
      this.form.vaccineSortId = this.queryParams.sortId;
      console.log(this.form.hospitalId);
      this.addFlag = !this.addFlag;
    },
    reset() {
      this.form = {
        vaccineId: 0,
        vaccineName: null,
        vaccinePrice: null,
        vaccineSortId: null,
        vaccineFactory: null,
        vaccineType: null,
        vaccineIntro: null,
        vaccineImg: null,
        suitableAge: null,
      };
    },
    getOne(row) {
      this.editFlag = !this.editFlag;
      getOneVaccine(row.vaccineId).then((response) => {
        console.log(response);
        if (response.code === 200) {
          this.form = response.data;
        } else {
          this.$message.error("获取分类id为：" + row.vaccineId + "的接口出错");
        }
      });
    },
    deleteItem(row) {
      this.$modal
        .confirm('是否确认删除分类编号为"' + row.vaccineId + '"的留言？')
        .then(function () {
          return deleteVaccine(row.vaccineId);
        })
        .then(() => {
          this.lists();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    update() {
      //前端校验,加钱才做
      //发送请求到后端

      updateVaccine(this.form).then((response) => {
        if (response.code === 200) {
          this.$message.success(response.msg);
          this.reset()
          this.lists();
          this.editFlag = false;
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    save() {
      addVaccine(this.form).then((response) => {
        if (response.code === 200) {
          this.$message.success(response.msg);
          this.reset()
          this.lists();
          this.addFlag = false;
        } else {
          this.$message.error(response.msg);
        }
      });
    },

    handleCurrentChange(val) {
      console.info("改变分页起始数据" + val);
      this.queryParams.pageNum = val;
      this.lists();
    },
    handleSizeChange(val) {
      console.info("改变每页显示的最大条数" + val);
      this.queryParams.pageSize = val;
      this.lists();
    },
    lists() {
      if (!this.queryParams.hospitalId) return;
      vaccineList(this.queryParams).then((response) => {
        if (response.code === 200) {
          this.$message.success(response.msg);
          this.tableData = response.rows;
          this.queryParams.total = response.total;
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.lists();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.hospitalList = [];
      this.vaccineSortList = [];
      this.queryParams.hospitalId = null;
      this.queryParams.sortId = null;
      this.handleQuery();
    },
    hospitalChange() {
      console.log(1234);
        this.vaccineSortList = [];
        this.$set(this.queryParams,'sortId',null)
    },
    // 医院名称远程搜索
    getHospitalList(key) {
      
      // const key = this.queryParams.hospitalName;
      // this.queryParams.hospitalId = null;
      this.hospitalLoading = true;
      vagueHospitalList({ key }).then((res) => {
        this.hospitalList = res.rows;
        // console.log(this.hospitalList);
        this.hospitalLoading = false;
        // this.hospitalName = res.rows[index].hospitalName
      });
    },
    // 医院名称远程搜索
    getVaccineSortList(vaccineSortName) {
      // const key = this.queryParams.hospitalName;
      // this.vaccineSortLoading=true;
      const hospitalId = this.queryParams.hospitalId;
      const pageSize = 10;
      const pageNum = 1;
      this.vaccineSortLoading = true;
      vaccineSortQueryList({
        vaccineSortName,
        hospitalId,
        pageSize,
        pageNum,
      }).then((res) => {
        this.vaccineSortList = res.rows;
        this.vaccineSortLoading = false;
        // this.vaccineSortLoading=false;
        // this.hospitalName = res.rows[index].hospitalName
      });
    },
    setHospitalName(key, index) {
      console.log(key, index);
    },
  },
  created() {
    this.lists(this.queryParams);
  },
};
</script>

<style>
.el-breadcrumb {
  padding-bottom: 12px;
}
.el-pagination {
  padding-top: 12px;
}
.img-wrapper {
  width: 100px;
  height: 100px;
}
.img-wrapper img {
  width: 100px;
  height: 100px;
}
</style>
